<template>
  <div class="header">
    <header>
      新型冠状肺炎实时监测
      <div class="time">当前时间：{{ time }}</div>
    </header>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, defineComponent, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter
const route = useRoute
const store = useStore

const data:any = reactive({
  setdata: null
})
const time = ref('')
const setdate = () => {
  let year = new Date().getFullYear()
  let month = new Date().getMonth() + 1
  let data = new Date().getDate()
  let hous = new Date().getHours()
  let min = new Date().getMinutes()
  let s = new Date().getSeconds()
  let date = `${year}年${month}月${data}日-${hous}时${min}分${s}秒`
  time.value = date
}
onMounted(() => {
  data.setdata = setInterval(() => {
    setdate()
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(data.setdata)
})
</script>

<style scoped lang='scss'>
header {
  background: url(../assets/image/head_bg.png) no-repeat;
  background-size: 100%;
  height: 100px;
  font-size: 40px;
  font-weight: 8px;
  display: flex;
  padding-top: 10px;
  padding-left: 725px;

  .time {
    font-size: 28px;
    margin-left: 200px;
  }
}
</style>